<script>
/**
 * @desc 从'我的行程'列表中进入的'详情'
 */

import { createNamespacedHelpers } from 'vuex'
import aircraftIco from '@/assets/icons/aircraft.svg'
import shipIco from '@/assets/icons/ship.svg'
import busIco from '@/assets/icons/bus.svg'

const { mapState, mapActions } = createNamespacedHelpers('MyTravel')

export default {
  name: 'my-travel-schedules',
  data: () => ({ aircraftIco, shipIco, busIco }),
  computed: { ...mapState(['schedules']) },
  methods: {
    ...mapActions(['getSchedules'])
  },

  onLoad(options) {
    this.getSchedules(options.id)
  }
}
</script>

<template>
  <div class="my-travel-schedules">
    <div
      v-for="(v,i) in schedules"
      :key="v.id"
      class="item"
    >
      <h2 class="date-bar">
        <span class="day">Day</span>
        <span class="num">{{i+1}}</span>
      </h2>

      <p class="places">
        <block
          v-for="p in v.places"
          :key="p.id"
        >
          <span class="place">{{p.name}}</span>
          <img v-if="p.trafficType" :src="[null, aircraftIco, shipIco, busIco][p.trafficType]" class="traffic-icon"/>
        </block>
      </p>

      <div class="desc-list">
        <block
          v-for="d in v.desc"
          :key="d.id"
        >
          <h3 v-if="d.type==='title'" class="title">{{d.content}}</h3>
          <p v-else-if="d.type==='text'" class="article">{{d.content}}</p>
          <img v-else-if="d.type==='img'" :src="d.content" class="desc-image" mode="aspectFill"/>
        </block>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './styles.scss';
</style>
